toc

Team LiB
Next Section

HTML & CSS for Visual Learners
HTML & CSS for Visual Learners
by Visibooks, Inc. ISBN:1597060127
Visibooks, LLC. © 2004 (185 pages)

Learn to create Web sites using HTML with this hands-on, screenshot-intensive guide. With this book you'll learn HTML basics, understand layout and navigation, employ style sheets, enable interactivity, master advanced output, and more.

Table of Contents
 | HTML & CSS for Visual Learners
 | HTML Basics
 | Layout & Navigation
 | Interactivity
 | Advanced Layout
 | List of Sidebars

Team LiB
Next Section


backcover

Team LiB

Back Cover

This book helps beginners learn how to create Web sites using HTML. 155 screenshots and graphics show how to:

  • Learn HTML basics: Create a home page, format pages and text, create links, insert graphics.
  • Understand layout and navigation: Use tables, navigation bars, subsections.
  • Employ style sheets: Format text site-wide with style sheets. Create page/paragraph-specific styles.
  • Enable interactivity: Employ forms and templates. Upload sites to a Web server.
  • Master advanced layout: Insert backgrounds, spacers, specify page margins.

Team LiB


HTML & CSS for Visual Learners

© 2004 Visibooks™, LLC.

All rights reserved.

Trademarks and Disclaimer

Visibooks™ is a trademark of Visibooks, LLC. All brand and product names in this book are trademarks or registered trademarks of their respective companies.

Visibooks™ makes every effort to ensure that the information in this book is accurate. However, Visibooks™ makes no warranty, expressed or implied, with respect to the accuracy, quality, reliability, or freedom from error of this document or the products described in it. Visibooks™ makes no representation or warranty with respect to this book's contents, and specifically disclaims any implied warranties or fitness for any particular purpose. Visibooks™ disclaims all liability for any direct, indirect, consequential, incidental, exemplary, or special damages resulting from the use of the information in this document or from the use of any products described in it. Mention of any product does not constitute an endorsement of that product by Visibooks™. Data used in examples are intended to be fictional. Any resemblance to real companies, people, or organizations is entirely coincidental.

This book was supported in whole or in part by the U. S. Department of Education (Grant No. H133S030008). However, the opinions expressed herein do not necessarily reflect the policy or position of the U. S. Department of Education, Office of Special Education Programs, and no official endorsement by the Department should be inferred.

1-59706-012-7


HTML Basics

Create a home page

  1. On the Taskbar, click the [image] button, then Programs, then Accessories, then Notepad.

    The Notepad window should open.

    Click To expand

  2. In the Notepad window, type:

      <html>
    Click To expand
    Tip

    <html> is a tag. Tags are instructions to a Web browser.

    This particular instruction lets the Web browser know that what follows is a Web page, written in HTML, Hypertext Markup Language.

  3. On the Menu Bar, click File, then Save.

    Click To expand

  4. When the Save As window appears, select the My Documents folder in the Save in drop-down list.

  5. Click the [image] icon.

    Click To expand

  6. Name the new folder HTML Files.

    Double-click it so it appears in the Save in box.

    Click To expand

  7. Within the HTML Files folder, create a new folder called Dogs.

    Double-click it so it appears in the Save in box.

    Click To expand

  8. In the File name box, type:

    index.html

  9. In the Save as type drop-down list, click All Files.

    Click To expand

  10. Click the [image] button.

    Start Sidebar
    Home page file names

    Whenever you're creating a Web site, give the home page the file name index.html.

    index.html comes up automatically when the address of a Web site or directory is typed into a browser.

    For instance, if you go to http://www.visibooks.com, the home page appears automatically. That's because its file name is index.html.

    If the file name of the Visibooks home page was homepage.html, you'd have to type http://www.visibooks.com/homepage.html to get it to appear.

    End Sidebar

  11. Below the <html> tag, type:

      <head>
  <title>A Home Page About Dogs</title>
  </head>
    Click To expand
    Tip

    The <head> section contains information that doesn't show up on the page when it's viewed in a browser.

    Note the closing </head> tag. In HTML, you must give the browser instructions to end something as well as start it.

    The text A Home Page About Dogs is not a tag. It is text surrounded by tags. The <title> and </title> tags tell the browser what to do with the text: make it the title of the page.
    Start Sidebar
    Click To expand
    End Sidebar

  12. Below the </head> tag, add:

      <body>

  </body>
    Tip

    Anything you want to be visible in a browser's main window must be put between the <body> and </body> tags.

  13. Below the </body> tag, close the </html> tag.

    When you're finished, the code should look like this:

    Click To expand

  14. Between the <body> and </body> tags, type:

      Dogs Home Page
    Click To expand

  15. Save index.html.

View the page in a browser

  1. Open a browser, such as Internet Explorer.

  2. On its Menu Bar, click File, then Open.

    Click To expand

  3. When the Open window appears, click the [image] button.

    Click To expand

  4. When the new window appears, navigate to the Dogs folder in the Look in drop-down list.

    Then click the home page: index.html.

    Click To expand

  5. Click the [image] button, then the [image] button.

    The page should look like this:

    Click To expand

    You have created a home page titled A Home Page About Dogs.

    The home page's file name is index.html.

    It is located in a folder called Dogs in the HTML Files folder.


Format text

Create a style sheet

  1. On the Notepad Menu Bar, click File, then New.

    Click To expand

  2. When the blank document appears, save it in the Dogs folder with the file name format.css.

    Click To expand
    Tip

    Remember to save it as All Files.

  3. On the blank page, type:

      h1 {font-family:verdana,helvetica,sans
  serif; font-weight:bold}
    Click To expand
    Tip

    This means that every time a <h1> or </h1> (heading, size 1) tag comes up on a page in this site, the text they enclose will be displayed in the font families specified, and bold.

    The first font family, verdana, is included with Windows.

    The second font family, helvetica, is included with Macs.

    The third font family, sans serif, ensures that if a computer doesn't have the arial or helvetica fonts, the computer will choose a font that looks like them.

  4. Save format.css.

Integrate a style sheet

  1. In Notepad, open the file index.html.

    Tip

    You might have to click All Files in the Files of type drop-down list for the page to appear in the Open window.

  2. Below the <head> tag, add a <link> tag that links the page to format.css:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  Dogs Home Page

  </body>
  </html>
    Click To expand

  3. Save index.html.

Apply formatting

  1. Enclose the words Dogs Home Page in <h1> (heading, size 1) tags:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1> Dogs Home Page </h1>

  </body>
  </html>
    Click To expand

  2. Save index.html and view it in the browser.

    Tip

    Click the browser's [image] icon to see the page with recent changes.

    It should look like this:

    Click To expand

Change text size

  1. In Notepad, open format.css.

  2. Add the attribute

      font-size:16pt

  to the h1 formatting:

  h1 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:16pt}
    Click To expand

  3. Save format.css.

  4. Reload index.html in the browser.

    It should look like this:

    Click To expand

Change text weight

  1. In Notepad, open index.html.

  2. Below the heading, insert a paragraph:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1>Dogs Home Page</h1>

  <p>These are my favorite breeds of dog:</p>

  </body>
  </html>
    Click To expand

  3. Save index.html.

  4. Reload index.html in the browser.

    It should look like this:

    Click To expand

  5. In Notepad, open format.css.

  6. Add formatting for the <p> (paragraph) tag:

      h1 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:16pt}

  p {font-family:arial,helvetica,sans serif;
  font-size:10pt}
    Click To expand

  7. Save format.css.

  8. Reload index.html in the browser.

    It should look like this:

    Click To expand

  9. In Notepad, open index.html.

  10. In the paragraph, enclose the words favorite breeds in <b> (bold) tags:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1>Dogs Home Page</h1>

  <p>These are my <b> favorite breeds </b> of
  dog:</p>

  </body>
  </html>
    Click To expand

  11. Save index.html.

  12. Reload index.html in the browser.

    It should look like this:

    Click To expand

Align text

  1. In index.html, add the attribute align = "right" within the <p> tag:

      <p align="right">

  <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1>Dogs Home Page</h1>

  <p align="right">These are my <b>favorite
  breeds</b> _ of dog:</p>

  </body>
  </html>
    Click To expand

  2. Save index.html, then reload it in the browser.

    It should look like this:

    Click To expand

  3. Replace the attribute align = "right" with align = "center".

      <p align="center">

  4. Save index.html, then reload it in the browser.

    It should look like this:

    Click To expand

  5. Remove the align = "center" attribute from the <p> tag:

      <p>These are my <b>favorite breeds</b> _ of
  dog:</p>

  6. Save index.html then reload it in the browser.

    It should look like this:

    Click To expand

Indent text

  1. Insert three new paragraphs into index.html:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1>Dogs Home Page</h1>

  <p>These are my <b>favorite breeds</b> _ of
  dog:</p>

  <p>Chesapeake Bay Retriever</p>

  <p>German Shepherd</p>

  <p>Yorkshire Terrier</p>

  </body>
  </html>
    Click To expand

  2. Enclose these paragraphs in <ul> (unordered list) tags to indent them:

      <html>
  <head>
  <link rel="stylesheet" href="format.css">
  <title>A Home Page About Dogs</title>
  </head>
  <body>

  <h1>Dogs Home Page</h1>

  <p>These are my <b>favorite breeds</b> _ of
  dog:</p>

  <ul>

  <p>Chesapeake Bay Retriever</p>

  <p>German Shepherd</p>

  <p>Yorkshire Terrier</p>

  </ul>

  </body>
  </html>

  3. Change some of the <p> tags to <br> (line break) tags:

      <p>Chesapeake Bay Retriever <br>

  German Shepherd <br>

  Yorkshire Terrier</p>
    Tip

    Note that the <p> tags in front of German Shepherd and Yorkshire Terrier were removed.

  4. Save index.html and reload it.

    It should look like this:

    Click To expand

Create lists

  1. With the three breeds of dog, replace the <p> and <br> tags with <li> (list item) tags:

      <ul>

  <li>Chesapeake Bay Retriever</li>

  <li>German Shepherd</li>

  <li>Yorkshire Terrier</li>

  </ul>
    Click To expand

  2. Save index.html and reload it.

    It should look like this:

    Click To expand

  3. In Notepad, open format.css.

  4. Add font and size formatting for the <li> tags:

      h1 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:16pt}

  p {font-family:arial,Helvetica,sans serif;
  font-size:10pt}

  li {font-family:arial,Helvetica,sans serif;
  font-size:10pt}

  5. Save format.css.

  6. Reload index.html.

    It should look like this:

    Click To expand

Practice

  1. Change the title of the home page, index.html, to My Favorite Dogs.

  2. Change the bulleted list to a numbered list.

    Tip

    Use <ol> instead of <ul> to generate a numbered list.

  3. Change the numbered list back to a bulleted list.

  4. Make the list items bold.

    Tip

    Instead of using the <b> tag in index.html, open format.css and put the attribute

      font-weight:bold

    into the formatting for the <li> tag.

    Save index.html and view it in the browser.

    The page should look like this:

    Click To expand


Create links to new pages

Step 1: Create a new page

  1. In Notepad, change the title of index.html to Chesapeake Bay Retrievers.

  2. Take out all the tags and text between the <body> and </body> tags.

    Click To expand

  3. Save the page as chesapeake.html in the Dogs folder.

    Click To expand
    Tip

    Remember to Save as type: All Files.
    Start Sidebar
    File names for the Web

    Most Web servers are Unix- or Linux-based, which don't deal cleanly with spaces in file names. For instance if you name a file fido page.html, it may show up in the URL box of the browser as fido%20page.html.

    Also, Web servers are case-sensitive, so keeping file names lower-case eliminates a potential source of mistakes.

    Make all file names in a Web site—pages, graphics and folders—lower-case, with no spaces.

    Correct file name: chesapeake.html

    Incorrect: Chesapeake Bay.html

    End Sidebar

  4. Beneath the <body> tag, type:

      Chesapeake Bay Retrievers
    Click To expand

  5. Enclose the text in <h2> tags:

      <h2>Chesapeake Bay Retrievers</h2>
    Click To expand

  6. Save chesapeake.html.

  7. In Notepad, open format.css.

  8. Below the h1 formatting, insert this formatting for the <h2> (heading, size 2) tag:

      h1 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:16pt}

  h2 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:14pt}

  p {font-family:arial,Helvetica,sans serif;
  font-size:10pt}

  li {font-family:arial,Helvetica,sans serif;
  font-weight:bold; font-size:10pt}
    Click To expand

  9. Save format.css.

  10. Open chesapeake.html in the browser.

    It should look like this:

    Click To expand
    Start Sidebar
    Providing navigation clues with text size

    The heading of the Chesapeake Bay Retriever page is one size smaller than the heading of the home page. That's because the CBR page is one step down in the site hierarchy.

      Dogs Home Page
  size 1 heading
  font-size:16pt
    Click To expand
    End Sidebar

Step 2: Link to the new page

  1. Open index.html in Notepad.

  2. Enclose Chesapeake Bay Retriever in <a> (anchor) tags that link the text to chesapeake.html:

      <li> <a href="chesapeake.html"> Chesapeake
  Bay Retriever </a> </li>
    Click To expand

  3. Save index.html, then view it in the browser.

    The words Chesapeake Bay Retriever should be a link.

    The page should look like this:

    Click To expand

  4. Click the Chesapeake Bay Retriever link.

    The Chesapeake Bay Retriever page should appear in the browser:

    Click To expand

Practice

  1. Create new pages for German Shepherds and Yorkshire Terriers.

    Page

    Title

    File Name

    German Shepherds

    German Shepherds

    german.html

    Yorkshire Terriers

    Yorkshire Terriers

    yorkshire.html
    Tip

    Open chesapeake.html, then Save As with the file name german.html. Then change its title and text. Do the same thing to create yorkshire.html.

  2. On the home page, link the words German Shepherd and Yorkshire Terrier to their pages.

  3. On the home page, remove the words

    Home Page

    after

    Dogs

  4. Make sure the headings of the German Shepherd and Yorkshire Terrier pages are the same size as the heading of the Chesapeake Bay Retriever page.

  5. Save all pages.

  6. Click the home page's links to make sure they work.


Create e-mail and external links

Create an e-mail link

  1. In Notepad, open index.html.

  2. Beneath the bulleted list, type:

      <p>For more information, contact
  dogs@dogs.com.</p>
    Click To expand

  3. Surround the e-mail address with anchor tags, but instead of linking it to a Web page, use the mailto command to link it to an e-mail program:

      <p>For more information, contact
  <a href="mailto: dogs@dogs.com">
  dogs@dogs.com</a>.</p>
    Click To expand

  4. Save the home page and view it in the browser.

    It should look like this:

    Click To expand

  5. Click the dogs@dogs.com link.

    If an email program is configured on your computer, it should open:

    Click To expand

Link to an external site

  1. Add a new paragraph below the email link. Type:

      <p>Please also visit www.dogs.com.</p>

  2. Surround the Web address http://www.dogs.com with these anchor tags to link it to the external Web site:

      <a href="http://www.dogs.com"
  target="new">www.dogs.com</a>
    Click To expand
    Tip

    For an external link to work, you must type http://as part of the Web address.

    The attribute target=“new” opens a new browser window to display the external site.

  3. Save the home page, view it in the browser, then click the http://www.dogs.com link.

    Click To expand

    It should take you to an external site. (Probably PetSmart, a site linked to the dogs.com address.)

    Click To expand


Insert graphics

Capture graphics

  1. Using the browser, go to:

    http://www.visibooks.com/books/html/dogpics

  2. Place your cursor on top of the picture of the Chesapeake Bay Retriever, then click with your right mouse button.

    Click To expand

  3. When the menu appears, click Save Picture As.

  4. When the Save Picture window appears, click the Dogs folder in the Save in drop-down list.

  5. Create a new folder within Dogs called graphics.

    Click To expand

  6. Double-click the graphics folder so it appears in the Save in drop-down list.

    Click To expand

  7. Click the [image] button.

    This should save the graphic inside the graphics folder.

    Tip

    Creating this separate sub-folder to hold your site's graphics makes the site easier to organize and update.

Insert graphics

  1. In Notepad, open chesapeake.html.

  2. Under the main heading, insert an <img> (image) tag:

    Click To expand

  3. Save the page, then view it in the browser.

    It should now look like this:

    Click To expand

Align graphics

  1. Below the <img> tag, type:

      <p>Chesapeake Bay Retrievers love water. If
  you throw tennis balls in the water, these
  dogs will chase them and bring them back
  until your arm falls off.</p>
    Click To expand

  2. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  3. Add the align=“left” attribute to the <img> tag:

      <img src="graphics/chessie.gif"
  align="left">
    Click To expand

  4. Save the page and view it in the browser (just click the Click To expand icon).

    It should look like this:

    Click To expand

Format graphics

  1. Add the alt (alternative text) attribute to the <img> tag:

      <img src="graphics/chessie.gif"
  align="left" alt="Chesapeake Bay
  Retriever" >
    Start Sidebar
    Alt text

    "Alt" text allows visually-impaired people to know what a graphic represents. Alt text also allows search engines to index visual content.

    End Sidebar

  2. Add the vspace (vertical space) and hspace (horizontal space) attributes as well:

      <img src="graphics/chessie.gif"
  align="left" alt="Chesapeake Bay Retriever"
  vspace="4" hspace="12" >
    Tip

    The "4" and "12" in these attributes refer to pixels on the computer screen: 4 pixels vertical space and 12 pixels horizontal space, respectively.

  3. Add the border attribute:

      <img src="graphics/chessie.gif"
  align="left" alt="Chesapeake Bay Retriever"
  vspace="4" hspace="12" border="1">
    Click To expand

  4. Save the page and view it in the browser.

    The text should be aligned with the top of the graphic:

    Click To expand

  5. Move your cursor onto the graphic.

    The "Alt" text should pop up.

    Click To expand

Practice

  1. Go to http://www.visibooks.com/books/html/dogpics.

  2. Save the German Shepherds graphic in the graphics folder, with the file name shepherds.gif.

  3. Save the Yorkshire Terrier graphic in the graphics folder, with the file name yorkie.gif.

  4. Insert shepherds.gif into the German Shepherds page below the heading.

  5. Insert yorkie.gif into the Yorkshire Terriers page below the heading.

  6. On the German Shepherds page, insert the text:

      German Shepherds are smart dogs.

    as a paragraph below the graphic.

  7. On the Yorkshire Terriers page, insert the text:

      Yorkshire Terriers are cute.

    as a paragraph below the graphic.

  8. On both pages, align the text to the side of the graphic, as on the Chesapeake Bay Retrievers page.

  9. In both pages, give the graphics a border of 1, vspace of 4, and hspace of 12.


Create a navigation system

Link back to the home page

  1. In Notepad, open chesapeake.html.

  2. Beneath the paragraph, type:

      <p>Home</p>

  3. Enclose the word Home in anchor tags that link it back to the home page:

      <p><a href="index.html">Home</a></p>
    Click To expand
    Tip

    Remember, index.html is the file name for the home page.

  4. Save the page, and view it in the browser.

    The word Home should now be a link:

    Click To expand

  5. Click the Home link.

    The home page should appear in the browser.

  6. Click the Chesapeake Bay Retriever link.

    Click To expand

    The Chesapeake Bay Retriever page should appear in the browser.

  7. In Notepad, open german.html.

  8. Create a link back to the home page just like in the Chesapeake Bay Retriever page:

      <p><a href="index.html">Home</a></p>

  9. On the Yorkshire Terriers page, create a link back to the home page in the same way.

Link pages to each other

  1. In Notepad, open chesapeake.html.

  2. Following the <a href=“index.html”>Home</a> link, type:

      | Chesapeake Bay Retriever | German
  Shepherd | Yorkshire Terrier

  <p><a href="index.html">Home</a> |
  Chesapeake Bay Retriever | German Shepherd
  | Yorkshire Terrier</p>

  3. Make the words Chesapeake Bay Retriever bold:

      <p><a href="index.html">Home</a> |
  <b> Chesapeake Bay Retriever </b> | German
  Shepherd | Yorkshire Terrier</p>

  4. Link the words German Shepherd to the German Shepherds page:

      <p><a href="index.html">Home</a> |
  <b>Chesapeake Bay Retriever</b> | <a
  href="german.html"> German Shepherd </a> |
  Yorkshire Terrier</p>

  5. Link the words Yorkshire Terrier to the Yorkshire Terriers page:

      <p><a href="index.html">Home</a> |
  <b>Chesapeake Bay Retriever</b> | <a
  href="german.html">German Shepherd</a> | <a
  href="yorkshire.html"> Yorkshire
  Terrier </a> </p>
    Click To expand

  6. Save the page and view it in the browser.

    It should look like this:

    Click To expand
    Start Sidebar
    Showing "you are here"

    A site's navigational system should show people two things: where they are, and where they can go.

    To show people where they are, make the link corresponding to the current page into plain text. This lets users know that if they can't go to that page, they must be looking at it.

    Click To expand
    End Sidebar

Use graphics as links

  1. In Notepad, open index.html.

  2. Below the bulleted list of links, insert the Chesapeake Bay Retriever, German Shepherd and Yorkshire Terrier graphics:

      <img src="graphics/chessie.gif">
  <img src="graphics/shepherds.gif">
  <img src="graphics/yorkie.gif">
    Click To expand

  3. Enclose the first image tag within anchor tags that link it to the Chesapeake Bay Retriever page:

      <a href="chesapeake.html"> <img
  src="graphics/chessie.gif"> </a>
    Click To expand

  4. Save the home page, then preview it in the browser.

  5. Click the Chesapeake Bay Retriever graphic.

    It should take you to the Chesapeake Bay Retriever page.

  6. Add the border=“0” attribute to the first image tag:

      <a href="chesapeake.html"><img
  src="graphics/chessie.gif" border="0" ></a>

  7. Save the home page and view it in the browser again.

    The blue link border around the Chesapeake Bay Retriever graphic should be gone:

    Click To expand

Practice

  1. In Notepad, open german.html.

  2. Following the <a href=“index.html”>Home</a> link, type:

      | Chesapeake Bay Retriever | German
  Shepherd | Yorkshire Terrier

  3. Make the words German Shepherd bold.

  4. Link the words Chesapeake Bay Retriever and Yorkshire Terrier to their corresponding pages.

  5. Save the page.

  6. Using the same system, create navigation links for the Yorkshire Terriers page. Then save the page.

  7. On the home page, link the German Shepherd graphic to the German Shepherds page.

  8. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.

  9. Remove the link borders from all graphics.

  10. View the site in the browser.

    It should look like the site at:

    http://www.visibooks.com/books/html/dogs


Change page and link colors

Change page background color

  1. In Notepad, open format.css.

  2. On the first line of the style sheet, add formatting for the <body> tag:

     body {background:ffffcc}
    Click To expand

  3. Save format.css.

  4. View the site's pages in the browser.

    The background color of each page should now be pale yellow.

    Start Sidebar
    Hexadecimal colors

    The ffffcc that stands for pale yellow is a hexadecimal color. Hexadecimal colors allow you to specify colors more precisely than you can with words.

    For shades of color, hexadecimals must be used. They work like this:

    Computers show color as a mix of red, green and blue. In hexadecimal colors, the first pair of letters or numbers signify red, the second pair signify green, and the third pair signify blue:

    The color values go from the maximum amount of color (ff) to no color at all (00):

    Navy blue would be shown in hexadecimals as no red (00), no green, (00), and a little bit of blue (66):

    000066

    End Sidebar

Change link colors

  1. In format.css, add formatting for the <a> tag:

      a {color:ff0000}
    Click To expand

  2. Save format.css.

  3. View the site's pages in the browser.

    The links on each page should be red.

    Start Sidebar
    Consistent link colors

    Link colors should be consistent throughout a Web site. If the links on one page are red, they should be red on every page.

    Learning that "red equals link" once is easier than having to figure out the link color for each page or section of a site.

    End Sidebar


Show your skills: HTML Basics

  1. Create a new home page and title it

    The Wonderful World of Cats

  2. Save the page within the HTML Files folder in a new folder called Cats.

  3. Make the main heading of the home page read

    The Wonderful World of Cats

  4. Using a style sheet, make the main heading size 1.

    Tip

    Open format.css from the Dogs folder, then save it in the Cats folder.

    In the home page, link to format.css using a <link> tag below the <head> tag.

    Then format the heading using a <h1> tag.

  5. Below the main heading on the home page, insert a bulleted list:

    • House Cats

    • Alley Cats

    • Big Cats

  6. Using the style sheet, put these list items in the arial font, with a size of 10 points. Plain text, not bold.

  7. Link each list item to a new page about it.

    For instance, link the words House Cats to a new page about house cats, with the file name housecats.html.

  8. On each of these new pages, put a descriptive heading at the top of the page.

    For instance, the words House Cats at the top of the house cats page.

  9. Using the style sheet, put the main headings of all four pages in the arial font.

    Give the home page's heading a size of 16 points.

    Give the headings of the other pages a size of 14 points.

  10. On each page, write a descriptive sentence or two in a new paragraph below the main heading.

    Using the style sheet, put these paragraphs in the arial font, with a size of 10 points.

  11. Go to http://www.visibooks.com/books/html/catpics and capture the three cat graphics there.

    Put them in a folder called graphics within the Cats folder.

  12. Insert the appropriate graphic on each of the 3 pages between the main heading and the descriptive paragraph below.

  13. Align each graphic left, then specify vspace of 4 and hspace of 16.

  14. Link each of the three pages back to the home page, and to each other.

    On each page, make the "you are here" link into bold, plain text.

  15. Using the style sheet, make the background color of each page light gray.

    Tip

    Add body {background: formatting to the style sheet.

    The hexadecimal code for light gray is cccccc.

  16. Make the link color on each page bright red.

  17. Preview the site in the browser.

    It should look like the site at:

    http://www.visibooks.com/books/html/cats


Layout & Navigation

Lay out pages using tables

Start Sidebar
Click To expand
End Sidebar

Create a table

  1. Create a new folder within the HTML Files folder called Travel.

  2. In Notepad, create a home page (file name index.html) titled Traveling Down South.

  3. Save it in the Travel folder.

    Tip

    Make sure that your new home page has the correct file name—index.html—and all necessary tags:

      <html>
  <head>
  <title>Traveling Down South</title>
  </head>
  <body>

  </body>
  </html>

    You're going to create a simple one-row, two-cell table that looks like this:

  4. The first step is to begin the table.

    Below the <body> tag, begin your table with the <table> tag:

      <body>
  <table>

  5. Below the <table> tag, start a row with the <tr> (table row) tag:

      <body>
  <table>
  <tr>

  6. In the table row, start the first cell with the <td> (table data) tag:

      <body>
  <table>
  <tr>
  <td>

  7. After the <td> tag, type the word links, then close the cell with the </td> tag:

      <body>
  <table>
  <tr>
  <td>links </td>

    You've created the first cell in the row:

  8. Now create the second cell in the row:

    Add another <td> tag, the word content, and close the second cell with a </td> tag:

      <body>
  <table>
  <tr>
  <td>links</td>
  <td>content</td>

  9. Close the row with a </tr> tag.

      <body>
  <table>
  <tr>
  <td>links</td>
  <td>content</td>
  </tr>

  10. Close the table with the </table> tag:

      <body>
  <table>
  <tr>
  <td>links</td>
  <td>content</td>
  </tr>
  </table>

    When you're done, it should look like this:

    Click To expand

  11. Show the table outlines in a browser—add the attribute border=“1” to the <table> tag:

      <body>
  <table border="1" >
  <tr>
  <td>links</td>
  <td>content</td>
  </tr>
  </table>

  12. Save the page, then view it in the browser.

    It should look like this:

    Click To expand

Format a table

  1. Now you'll extend the table.

    In Notepad, add the width=“100%” attribute to the <table> tag:

      <body>
  <table border="1" width="100%" >
  <tr>
  <td>links</td>
  <td>content</td>
  </tr>
  </table>

  2. Save the page and view it in the browser.

    It should look like this:

    Click To expand
    Start Sidebar
    Click To expand
    End Sidebar

  3. Remove the table border by specifying border=“0”:

      <body>
  <table border ="0" width="100%">
  <tr>
  <td>links</td>
  <td>content</td>
  </tr>
  </table>

  4. Make the first cell light gray. Add the attribute bgcolor=“#cccccc” to the first <td> tag:

      <body>
  <table border="0" width="100%">
  <tr>
  <td bgcolor="#cccccc" >links</td>
  <td>content</td>
  </tr>
  </table>

  5. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  6. You'll notice that the word links is right up against the edge of the left-hand cell.

    To add a 16-pixel margin between the edge of the cells and their contents, add the attribute cellpadding=“16” to the <table> tag:

      <body>
  <table border="0" width="100%"
  cellpadding="16" >
  <tr>
  <td bgcolor="#cccccc">links</td>
  <td>content</td>
  </tr>
  </table>

  7. To eliminate the spacing between cells, add the attribute cellspacing=“0” to the <table> tag:

      <body>
  <table border="0" width="100%"
  cellpadding="16" cellspacing="0" >
  <tr>
  <td bgcolor="#cccccc">links</td>
  <td>content</td>
  </tr>
  </table>

  8. Save the page and view it in the browser.

    It should look like this:

    Click To expand

Create a table-based home page

  1. Create a folder called graphics inside the Travel folder.

  2. Using the browser, go to:

    http://www.visibooks.com/books/html/travelpic

  3. Capture the graphic there (uva.gif) and save it in the graphics folder.

  4. In the right-hand cell on the home page, replace the word content with the heading:

      <h1>Traveling South</h1>

  5. Insert the graphic beneath the heading:

      <img src="graphics/uva.gif">

  6. Under the graphic, add the following paragraph:

      <p>If you've got a couple of weeks for
  vacation, you might want to visit the
  South. Richmond, Williamsburg, and
  Charleston are all beautiful cities.</p>

  7. In the left-hand cell, replace the word links with the names of this site's main sections:

    Richmond, Williamsburg and Charleston.

  8. Make each word a paragraph.

    The code for the page should look like this:

    Click To expand

  9. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  10. Bring the left-hand cell's content to the top of the cell:

    Add the attribute valign=“top” to the first <td> tag.

    (To cover all bases, add the attribute to the second <td> tag as well)

      <table border="0" width="100%"
  cellpadding="16" cellspacing="0">
  <tr>
  <td bgcolor="#cccccc" valign="top" >

  <p>Richmond</p>

  <p>Williamsburg</p>

  <p>Charleston</p>

  </td>
  <td valign="top" >

  <h1>Traveling South</h1>

  <IMG SRC="graphics/uva.gif">

  <p>If you've got a couple of weeks for
  vacation, you might want to visit the
  South. Richmond, Williamsburg, and
  Charleston are all beautiful cities.</p>

  </td>
  </tr>
  </table>

  11. Control the widths of the table cells:

    Add the attribute width=“20%” to the first <td> tag, and the attribute width=“80%” to the second.

      <table border="0" width="100%"
  cellpadding="16" cellspacing="0">
  <tr>
  <td bgcolor="#cccccc" valign="top"
  width="20%" >

  <p>Richmond</p>

  <p>Williamsburg</p>

  <p>Charleston</p>

  </td>
  <td valign="top" width="80%" >

  <h1>Traveling South</h1>

  <IMG SRC="graphics/uva.gif">

  <p>If you've got a couple of weeks for
  vacation, you might want to visit the
  South. Richmond, Williamsburg, and
  Charleston are all beautiful cities.</p>

  </td>
  </tr>
  </table>

  12. Save the page and view it in the browser.

    It should now look like this:

    Click To expand

Create new table-based pages

  1. On the Notepad Menu Bar, click Edit, then Select All.

    Click To expand

  2. Click Edit, then Copy.

  3. Click File, then New.

  4. When a new blank page comes up, click Edit, then Paste.

    Click To expand

  5. Save the new page in the Travel folder with the file name richmond.html.

  6. Title the new page Richmond, VA.

  7. Using the browser, go to:

    http://www.visibooks.com/books/html/travelpic/richpic

  8. Capture the Richmond, Virginia graphic there (capitol.jpg) and save it in the graphics folder.

  9. Replace the Traveling South heading with one that reads Richmond, Virginia.

  10. Enclose it in <h2> tags.

  11. Replace the home page graphic with the Richmond graphic:

     <IMG SRC="graphics/capitol.jpg">

  12. Beneath the graphic, insert a new paragraph:

      <p>Richmond is the capital of Virginia.</p>

  13. Add the word Home in a new paragraph in the left-hand cell:

      <table border="0" width="100%"
  cellpadding="16" cellspacing="0">
  <tr>
  <td bgcolor="#cccccc" valign="top"
  width="20%">

  <p>Richmond</p>

  <p>Williamsburg</p>

  <p>Charleston</p>

  <p>Home</p>

  </td>
  <td valign="top" width="80%">

  <h2>Traveling South</h2>

  <IMG SRC="graphics/capitol.jpg">

  <p>Richmond is the capital of Virginia.<p>

  </td>
  </tr>
  </table>

  14. Save richmond.html and view it in the browser.

    The page should look like this:

    Click To expand

Practice

  1. Create pages for Williamsburg and Charleston just like the Richmond page.

    Get the graphic and text for the Williamsburg page at:

    http://www.visibooks.com/books/html/travelpic/willpic

    Get the Charleston page's graphic and text at:

    http://www.visibooks.com/books/html/travelpic/charlpic

  2. Using the words Richmond, Williamsburg, Charleston, and Home in the left-hand cell of each page, link all the pages in this Web site to each other.

    Tip

    Don't forget to transform the link that shows "You Are Here" into bold, plain text.

  3. Insert the text and graphics in their appropriate pages.

  4. Align all graphics to the left.

    Give them vspace of 4 pixels and hspace of 12 pixels.

    Give each graphic appropriate Alt text.

  5. When you're done, preview the site in the browser.

    It should look and work like the one at:

    http://www.visibooks.com/books/html/travel


Create navigation bars

Create a navigation bar for a home page

  1. Create a folder within the HTML Files folder called Travel West.

  2. Create a home page titled Traveling West On Vacation.

  3. Save the home page in your Travel West folder.

  4. Between the <body> and </body> tags, create a table with one row and 3 cells in the row:

      <table>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  </table>

  5. Give the <table> tag these attributes:

      width="100%"
  border="0"
  cellpadding="4"
  cellspacing="0"

  6. In the table's first cell, enter the word California as a paragraph. In the second cell, enter The Rockies as a paragraph, and in the third cell another paragraph, The Midwest.

  7. Using the align=“center” attribute, align each word/paragraph in the center of its cell.

  8. Make each cell 33% wide.

    (Except for the middle cell, which has to be 34%: their sum must equal the table width of 100%.)

  9. Change the background color of all table cells to light gray (#cccccc).

  10. Open format.css from the Dogs folder.

  11. Change the page background to white:

      body {background:ffffff}

  12. Save the style sheet as west.css in the Travel West folder.

  13. Open the home page, index.html, in the Travel West folder.

  14. Using the <link> tag, link the home page to the style sheet west.css.

    The code should look like this:

      <html>
  <head>
  <title>Traveling West On Vacation</title>
  <link rel="stylesheet" href="west.css">
  </head>
  <body>

  <table width="100%" border="0"
  cellpadding="4" cellspacing="0">
  <tr>
  <td width="33%" bgcolor="cccccc">
  <p>California</p>
  </td>
  <td width="34%" bgcolor="cccccc">
  <p>The Rockies</p>
  </td>
  <td width="33%" bgcolor="cccccc">
  <p>The Midwest</p>
  </td>
  </tr>
  </table>

  </body>
  </html>

  15. Save the page and view it in the browser.

    The table should look like this:

    Click To expand

  16. Below the table, enter an <h1> heading:

      Traveling West

  17. Below the heading, add a new paragraph with this text:

      When you go West, be sure to visit the
  sights of California, the natural wonders
  of the Rockies, and the cities of the
  Midwest.

  18. Save the page and view it in the browser.

    It should look like this:

    Click To expand

Create navigation bar for a main section page

  1. Create a new page with file name california.html and save it in the Travel West folder.

  2. Title it Vacationing in California.

  3. Make the table just like the one on the home page, but add an extra cell on the end.

    Tip

    If you copy the table code from index.html and insert it into california.html, all you have to do is add a cell: <td></td>.

    Don't forget to change the cell widths. There are now four cells, and their widths must add up to 100%. That means 25% per cell:

      <table>
  <tr>
  <td width="25%"></td>
  <td width="25%"></td>
  <td width="25%"></td>
  <td width="25%"></td>
  </tr>
  </table>

  4. Format the table and text just like on the home page, but make the California cell bright yellow (bgcolor=“#ffff00”) to show "You are here."

  5. Link the page to the style sheet west.css.

  6. Save california.html and view it in the browser.

    The table should look like this:

    Click To expand

  7. In Notepad, link the word Home to the home page (<p><a href=“index.html”>Home</a></p>), then save the page.

  8. Open index.html.

  9. Link the word California to california.html.

  10. Save index.html.

Practice

  1. Create a new blank page and save it with the file name midwest.html.

    It will be The Midwest page, but leave it blank for right now.

  2. Create a new page with file name rockies.html.

    This is The Rockies page.

    Title it Nature in the Rocky Mountains.

  3. Make its navigation bar table exactly like that of the California page.

  4. Change the "You are here" yellow background color from the California cell to The Rockies cell.

  5. Link the words California, The Midwest and Home to their respective pages.

  6. When you're done, preview the page in the browser.

    It should look like this:

    Click To expand

  7. Repeat this process with the California and Midwest pages so they've got functioning navigation bars that show "you are here."

  8. Open the home page in Notepad, and in the navigation bar, link The Rockies and The Midwest to their respective pages.

  9. Make all "you are here" text that corresponds to the current page bold. (Example: make the words The Rockies bold on The Rockies page.)

  10. Link both pages to west.css.

  11. Save the pages, then preview the site in the browser.

    It should look like the site at:

    http://www.visibooks.com/books/html/travelwest


Add subsections to site

Insert a table for content and subsection links

  1. In Notepad, open california.html in the Travel West Web site.

  2. Below the navigation bar table, add another table that has one row and two cells in the row:

      <table>
  <tr>
  <td></td>
  <td></td>
  </tr>
  </table>

  3. Give the table these attributes:

      width="100%"
  border="0"
  cellpadding="16"
  cellspacing="0"

  4. Make the first cell 25% wide and the second cell 75% wide.

    Click To expand

  5. In the left-hand cell, put the subsections for the main California section:

      <p>The Golden Gate Bridge</p>
  <p>Highway 101</p>
  <p>Big Sur</p>

  6. In the right-hand cell, put the heading:

      <h2>Places to visit in California</h2>

  7. Below the heading, put the paragraph:

      <p>When in California, be sure to see the
  Golden Gate bridge, Highway 101, and Big
  Sur.</p>

  8. Align the contents of both cells to the top of the cells.

  9. Save the page and view it in the browser.

    It should look like this:

    Click To expand

Create subsection pages

  1. Create new blank pages for subsections The Golden Gate Bridge, Highway 101 and Big Sur:

    Page

    Title

    File Name

    The Golden Gate Bridge

    Seeing the Golden Gate Bridge

    goldengate.html

    Highway 101

    Driving Highway 101

    highway101.html

    Big Sur

    Staying in Big Sur

    bigsur.html

  2. Copy the tables from california.html and paste them into goldengate.html.

  3. On the Golden Gate Bridge page, change the heading to read Seeing the Golden Gate Bridge.

    Enclose the heading in <h3> tags.

  4. Below the heading, change the paragraph to read:

      The Golden Gate Bridge isn't golden-it's
  actually orange.

  5. Link the words California, Highway 101, and Big Sur to their respective pages.

    Tip

    Remember to un-bold the word California.

    Leave The Golden Gate Bridge as plain text to show "you are here."

  6. Save goldengate.html.

  7. Open west.css, and add formatting for the <h3> tag:

      h3 {font-family:verdana,helvetica,sans
  serif; font-weight:bold; font-size:12pt}

  8. Save west.css.

  9. Link all the pages to west.css.

  10. View goldengate.html in the browser.

    It should look like this:

    Click To expand
    Start Sidebar
    Consistent page layout

    Copying tables from one page and pasting them into new pages ensures that all pages share the same layout.

    This consistency makes site navigation easier: no matter which page in the site is being viewed, a person knows where the page's links and content will be.

    End Sidebar

Practice

  1. In Notepad, open california.html.

  2. Link the words The Golden Gate Bridge, Highway 101 and Big Sur to their respective pages.

  3. Save california.html.

  4. Open goldengate.html and copy both tables.

  5. Paste these tables into highway101.html.

  6. On the Highway 101 page, link the words The Golden Gate Bridge to the Golden Gate Bridge page.

  7. Remove the anchor tags around the text Highway 101 so it shows as plain text.

  8. Change the Highway 101 page's heading and descriptive text beneath it so it looks like this:

    Click To expand

  9. Format bigsur.html so its layout and navigation are consistent with the Golden Gate Bridge and Highway 101 pages.

    Heading:

      Staying in Big Sur

    Paragraph:

      There are many excellent hotels right on
  the ocean in Big Sur.

  10. Save all pages and view the site in the browser.

    It should look and work like:

    http://www.visibooks.com/books/html/travelwest2


Show your skills: Layout & Navigation

  1. In the Travel West site, lay out the Rockies page using tables so it looks like the California page.

    Heading for the Rockies page:

      Nature in the Rocky Mountains

  2. Create pages for three subsections of The Rockies main section:

    streams.html snow.html rocks.html

  3. Make sure that these pages are linked and laid out just like the Golden Gate Bridge, Highway 101 and Big Sur pages.

    Page

    Heading

    streams.html

    Mountain Streams

    snow.html

    Snow in the Rockies

    rocks.html

    Rock Formations

  4. Repeat this process with the Midwest section of the site:

    Page

    Heading

    midwest.html

    Cities of the Midwest

    Subsections in the Midwest section:

    Page

    Heading

    stlouis.html

    St. Louis

    chicago.html

    Chicago

    desmoines.html

    DesMoines

  5. On the St. Louis page, link to the external Web site http://www.stlouis.com.

    Paragraph for St. Louis page:

    Click To expand

  6. When you're done, open the Travel West site in the browser.

    It should look and function like the one at:

    http://www.visibooks.com/books/html/travelwest3


Interactivity

Insert META tags

Start Sidebar
META tags

META tags are HTML tags that describe a page, and make it easier to find and index by search engines.

META tags don't show up on a Web page. Rather, they reside unseen in its HTML code.

End Sidebar

  1. In Notepad, open the home page of the Travel West Web site.

  2. Beneath the <title> tags, insert a <meta> tag for describing the page:

       <head>
   <title>Traveling West On Vacation</title>
  <meta name="description">
   <link rel="stylesheet" href="west.css">
   </head>

  3. Add content that describes the page:

       <head>
   <title>Traveling West On Vacation</title>
   <meta name="description"
   content="This is
   the Travel West Web site. It contains
   information about vacationing in
   California, the Rockies and the Midwest.">
   <link rel="stylesheet" href="west.css">
   </head>


Employ forms

Create a form

  1. Create a new page in the Travel West site with the file name infoform.html.

  2. Title the page Request for Information.

  3. Below the <body> tag, insert a paragraph:

       <p>Fill out the following form to get more
   information about traveling West:</p>

  4. Below the paragraph, insert a <form> tag:

      <body>
  <p>Fill out the following form to get more
  information about traveling West:</p>
  <form>
  </body>

  5. Add a closing </form> tag:

       <form>
  </form>
   </body>

  6. Below the <form> tag, create a table with 4 rows and 2 cells in each row.

  7. Make the width 50%, give it cellpadding of 4, and a border of 1.

  8. In the top three left-hand cells, put:

      <p>Name:</p>
  <p>Address:</p>
  <p>Email:</p>

    The code should look like this:

        <form>
    <table width="50%" cellpadding="4"
    border="1">
    <tr>
    <td><p>Name:</p></td>
    <td></td>
    </tr>
    <tr>
    <td><p>Address:</p></td>
    <td></td>
    </tr>
    <tr>
    <td><p>Email:</p></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>
    </form>

  9. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  10. In the top right-hand cell, insert a text input field. Do this with an <input> tag:

       <table>
   <tr>
   <td>Name:</td>
   <td>
   <input type="text" name="name" size="20">
   </td>
   </tr>
    Tip

    The type of this form input field is "text" which makes it a textbox.

    The name of this input is "name" which is how the server knows that it's where people enter their name.

    The size is 20 characters—the length of the textbox.

  11. Save the page and view it in a browser.

    It should now look like this:

    Click To expand

  12. Insert textbox input fields in the table cells next to Address and Email as well.

  13. Name the input textbox next to Address "address."

         <input type="text" name="address"
     size="20">

  14. Name the input textbox next to E-mail "email".

  15. Save the page and view it in the browser.

    It should now look like this:

    Click To expand

  16. In the last row's right-hand cell, insert a submit button:

        <input type="submit">
    <tr>
    <td></td>
    <td>
    <input type="submit">
    </td>
    </tr>
    </table>

  17. Use the value attribute to specify the text displayed on the button:

       <tr>
   <td></td>
   <td>
   <input type="submit" value="Send me info">
   </td>
   </tr>
   </table>

  18. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  19. Remove the border from the table and align the text in the left-hand cells to the right.

       <td><p align="right">Name:</td>

  20. Make the left-hand cell in the first row 5% wide, and the right-hand cell in the first row 45% wide.

    Tip

    By specifying the width of cells in the first row, the cells in the rows beneath will assume the same widths.

  21. Save the page and view it in the browser.

    It should look like this:

    Click To expand

  22. In Notepad, open index.html.

    Add a new paragraph linked to infoform.html:

        <p><a href="infoform.html">Get more
    information about Western Travel mailed to
    you</a></p>

  23. Save the page and view it in the browser.

  24. Click the linked sentence.

    It should bring up the page with the form.

Make the form work

  1. In the <form> tag, add a method:

        <form method="post">
    Tip

    There are two methods used in forms, post and get. Post is used to send information to the server, get to get information from it.

  2. Add an action:

        <form method="post"
    action="http://www.yourdomain.com/cgi-
    bin/formmail.pl">

  3. Save the page.

    Start Sidebar
    Making a form work

    To make a form work, an action must be assigned to it.

    Consult with your Web server administrator to specify what action you should assign.

    The action above tells the form to post its data to a program called formmail.pl at yourdomain.com.

    The formmail.pl program might take the form data visitors submit and e-mail it to you.

    End Sidebar

Practice

  1. Create a new page in the Travel West site with the file name favoritesform.html.

  2. Title it My Favorite Places.

  3. Insert a form, then insert a table with four rows and two cells in each row.

  4. Fill the cells with the text and form objects seen below:

    Click To expand
    Tip

    The HTML code for a drop-down list looks like this:

         <select name="select">
     <option>First Choice</option>
     <option>Second Choice</option>
     <option>Third Choice</option>
     </select>

    The HTML code for radio buttons looks like this:

        <input type="radio" name="radios"
    value="radio1" checked> This is radio
    button 1
    <br>
    <input type="radio" name="radios"
    value="radio2"> This is radio button 2

    The checked attribute in the first radio button:

       <input type="radio" name="radios"
   value="radio1" checked >

    makes that radio button selected by default.

  5. Put these values in the drop-down list:

        California
    The Rockies
    The Midwest

  6. When finished, save the page and preview it in the browser.

    It should look like this:

    Click To expand


Upload sites to a Web server

Start Sidebar
WS_FTP

FTP stands for File Transfer Protocol, a way to transfer files between computers over the Internet. If you have trouble configuring FrontPage to upload pages to a Web server, use an FTP program.

Using an FTP program is the most straightforward way to upload a Web site to a Web server. WS_FTP is the most popular FTP program used to upload and download Web pages.

The Home version is free to use for 30 days, and can be downloaded at http://www.ipswitch.com.

End Sidebar

  1. Download WS_FTP Home and install it.

  2. Open WS_FTP Home.

    The Connection Wizard should open.

    Click To expand

  3. Click the [image] button.

  4. When the Site Name screen appears, type the name of your Web site in the Site Name box.

    Click To expand

    Then click the [image] button.

  5. When the Server Address screen appears, type the host address of your server in the Server Address box.

    It can be something like:

    http://www.visibooks.com

    http://washington.patriot.net

    207.176.7.217

    Click To expand

    Then click the [image] button.

    Tip

    You can get the Server Address of your Web site, as well as your username and password, from your Web server administrator.

  6. When the User Name and Password screen appears, type in your username and password.

    Click To expand

    Then click the [image] button.

  7. When the Connection Type screen appears, leave the connection type set at FTP.

    Click To expand

    Then click the [image] button.

  8. When the Finish screen appears, click the [image] button.

    Click To expand

  9. When the Tip of the Day window appears, uncheck the Show tips at startup checkbox, then click the [image] button.

    Click To expand

  10. WS_FTP should connect to your Web server:

    Click To expand

  11. In the left-hand My Computer pane, double-click the [image] icon to move up in the file hierarchy.

    Click To expand

  12. Double-click it until you see the folder that contains your Web site.

  13. Double-click the folder containing your Web site to open it.

    You should see all the pages in your Web site listed.

  14. In the right-hand pane with the name of your Web site, double-click on the public_html folder, html folder, or the folder that contains your Web pages on the server.

    You should now see the contents of your Web site on the server:

    Click To expand

  15. To send your Web pages to the Web server, highlight them,

    then click the [image] button.

    Tip

    If there are already pages on your Web server, the new pages you send will replace the old versions with the same file name.


Show your skills: Interactivity

Create a new home page and site

  1. Create a new home page titled World Dances. Save it within the HTML Files folder in a new folder called Dance.

  2. Create a home page for the site that looks like this:

    Click To expand

    Get the graphics and text for this page at:

    http://www.visibooks.com/books/html/dancing

  3. At the bottom of this and every other page in the site, put an e-mail link to info@worlddance.org.

Create main section pages

  1. Link the words American, Latin, and European in the navigation bar to new main section pages on American, Latin, and European dance, respectively:

        american.html
    latin.html
    european.html

    Get the images and text for these pages at:

    http://www.visibooks.com/books/html/dancing

    The American dance page should look like this:

    Click To expand

  2. Make the Latin and European pages look consistent with the American dance page.

Create subsection pages

  1. On the American dance page, link the words Lindy Hop and Foxtrot to new subsection pages on those dances.

    The Lindy Hop page should look like this:

    Click To expand

    Get the images and text for this and the other subsection pages at:

    http://www.visibooks.com/books/html/dancesub

  2. Make the Foxtrot page look consistent with the Lindy Hop page.

  3. Create the subsection pages Tango, Merengue, and Salsa for the Latin section.

  4. Create the subsection pages Waltz and Contra Dancing for the European section.

META tags

  1. Include this META description in the home page:

    Dances Around the World includes

    information about American, Latin and

    European dances.

Creating forms

  1. On the home page, insert a form that looks like this:

    Click To expand

  2. When you're done, preview the whole Web site in the browser.

    It should look like the site at:

    http://www.visibooks.com/books/html/worlddancing


Advanced Layout

Employ background graphics

  1. Open Notepad.

  2. Create a new page with all necessary HTML tags and a one-row, two-cell table:

      Rows: 1
  Cells: 2
  Width: 100%
  Border: 0
  Cellpadding: 18
  Cellspacing: 0

  3. Create a new folder in the HTML Files folder called Advanced Layout.

  4. Save the file in the Advanced Layout folder with the file name advlayout.html.

  5. Title it Advanced Layout.

  6. Give both cells in the table a dark blue background color (#000099).

  7. Make the first cell 10% wide, and the second cell 90% wide.

  8. Create a folder in the Advanced Layout folder called graphics.

  9. Go to:

    http://www.visibooks.com/books/html/advlayout/pics

    and save techtool.gif in the graphics folder.

  10. Insert techtool.gif in the left-hand cell.

          <td bgcolor="#000099" width="10%">
      <img src="graphics/techtool.gif">
      </td>

  11. Go to:

    http://www.visibooks.com/books/html/advlayout/pics

    and save bkgd.gif in the graphics folder.

  12. Make it the background of the right-hand cell using the background attribute:

       <td bgcolor="#000099" width="90%"
   background="graphics/bkgd.gif">

  13. In the right-hand cell, enter the heading:

        <h1>The Magazine for People Who Like
    Gadgets</h1>

  14. In Notepad, open west.css from the Travel West folder.

  15. Save it in the Advanced Layout folder as layout.css.

  16. In layout.css, change the formatting for the <h1> tag so it's in the arial font, 14 points, and bold.

  17. Using the color attribute, make the <h1> text white.

  18. Save layout.css.

  19. In Notepad, open advlayout.html and use the <link> tag to link it to the style sheet layout.css.

  20. Save the page and view it in the browser.

    It should look like this:

    Click To expand
    Tip

    Notice the line towards the bottom of the right cell where bkgd.gif begins repeating. It repeats because background graphics tile to fill all available space in a cell.

    The cell is 136 pixels tall: 100 pixels for techtool.gif, plus 36 for cellpadding(18 pixels at the top and bottom of techtool.gif). bkgd.gif is only 123 pixels tall; therefore, there's 13 pixels of space left to fill.

    To fix this, use an image editing program like Photoshop, Fireworks or Paint Shop pro to make the background image 136 pixels tall.


Employ style classes

  1. Below the first table, insert a three-cell table with a width of 100% and cellpadding of 4.

    Make both its border and cellspacing 0.

  2. Make the cells equal width and color them black.

  3. In the first cell, enter:

        <p>Laptops</p>

  4. In the second cell:

       <p>Cell Phones</p>

  5. In the third:

         <p>PDAs</p>
    Click To expand

  6. Open layout.css and add formatting for text in the navigation bar:

        navbar {color:ffffff; font-
   family:arial,helvetica,sans serif; font-
   size:12pt}
    Tip

    Make sure a period (.) precedes the word navbar.
    Click To expand

  7. Open advlayout.html and add the navbar class to the paragraphs:

        <p class="navbar"> Cell Phones</p>

  8. Add the align=<center> attribute to the <p> tags:

        <p align="center" class="navbar">

  9. Save the page and view it in the browser.

    It should look like this:

    Click To expand


Employ spacer GIFs

Start Sidebar
Why use spacer GIFs?

GIF graphics can be used as spacers to stretch table cells to an exact width. If they're transparent, they remain invisible regardless of the cell's background color.

A spacer GIF is used in the exercise below. It keeps the width of the left-hand cell constant, regardless of the size or resolution of the screen used to view it.

End Sidebar

  1. Go to:

    http://www.visibooks.com/books/html/advlayout/pics

    and save spacer.gif in the graphics folder.

  2. In advlayout.html, below the two tables, insert a third table just like the first table.

  3. Insert spacer.gif in the left-hand cell.

    Give it a width of 100 and height of 1.

      <td bgcolor="#000099" width="10%">
  <img src="graphics/spacer.gif" width="100"
  height="1" >
  </td>
    Tip

    Most spacer GIFs are 1×1 pixel, which load very quickly online. This one started out as 50×50 to make it easier to see and save.

  4. Change the background color of the cell containing spacer.gif to bright yellow (#ffff00).

  5. Change the background color of the right-hand cell to white (#ffffff).

  6. Enter paragraphs in the right-hand cell so the page looks like this when viewed in the browser:

    Click To expand
    Tip

    To make the letter W in Welcome larger and bold, add an in-text style in advlayout.html using the <span> tag:

      <p><span style="font-weight:bold; font-
  size:14pt">W</span>elcome to Tech
  Tool...</p>
    Start Sidebar

    "Cascading" style sheets

    Style instructions can be contained within an individual tag or page, without referring to a separate style sheet.

    These instructions will override those of the site's style sheet, hence the term "Cascading Style Sheets:"

      An instruction in a
  page's text...

  <span style="
  color:#ff0000">
  This is red text.
  </span>

                          ...overrides a style
                          instruction for the
                                page...

                          <html>
                          <head>
                          <style type="text/css">
                          .redtext {color:
                          "#ff0000"}
                          </style>
                          </head>

                                                           ...which overrides a style
                                                           instruction for the site.

                                                    <head>
                                                    <link rel="stylesheet"
                                                    href="format.css">
                                                    </head>
                                                    <body>
    End Sidebar

  7. Set the monitor to a higher resolution, or make the browser window wider if you can.

    The page should look like this:

    Click To expand

    Notice how the left-hand cells in the top and bottom tables stay the same width, regardless of the width of the window used to view them.


Specify page margins

  1. In Notepad, open layout.css.

  2. In formatting for the <body> tag, add the attributes

      margin-top:0
  margin-right:0
  margin-bottom:0
  margin-left:0

  body {background:ffffff; margin-top:0;
  margin-right:0; margin-bottom:0; margin-
  left:0}

  3. Specify a background color of dark blue (#000099) for the page itself.

    Click To expand

  4. Save layout.css.

  5. Open advlayout.html and add the .smalltext class using an in-page style:

      <html>
  <head>
  <style type="text/css">
  .smalltext {font-
  family:arial,helvetica,sans serif; font-
  size:8pt}
  </style>
  <title>
    Tip

    In-page styles are employed to specify formatting used only on that page—formatting not used anywhere else on the site.

  6. Add a new paragraph in the .smalltext class to the lower right-hand cell:

      <p class="smalltext"><b>Tech Tool</b><br>
  The Magazine for People Who Like
  Gadgets</p>
    Click To expand

  7. Save the page and view it in the browser.

    It should look like this:

    Click To expand


Create rollover effects

  1. Open layout.css.

  2. Add a new line with hover formatting for the <a> tag:

      a:hover {font-weight:bold}
    Click To expand

  3. Save layout.css.

  4. Open advlayout.html.

  5. Enclose the word Laptops in <a> tags:

      <a href="laptops.html">Laptops</a>
    Click To expand

  6. Add the navbar class to the <a> tag:

      <a class="navbar"
  href="laptops.html">Laptops</a>

  7. Save advlayout.html and view it in the browser.

  8. Place the cursor on the Laptops link.

    Click To expand

    It should turn bold.

    Click To expand

  9. Open layout.css and add italics to the hover formatting:

      a:hover {font-weight:bold; font-
  style:italic}

  10. Eliminate underlining from the navbar links.

    Add the text-decoration:none attribute to the .navbar class:

      .navbar {color:ffffff; font-
  family:arial,helvetica,sans serif; font-
  size:12pt; text-decoration:none}

  11. Save layout.css, then open advlayout.html and view it in the browser.

    It should look like this:

    Click To expand

  12. Place your cursor over the Laptops link.

    It should look like this:

    Click To expand


Show your skills: Advanced Layout

  1. Give the navigation table (the one with Laptops, Cell Phones and PDAs) two additional cells between the existing cells.

  2. Put | characters (on the same key as the backslash/character on your keyboard) in the two new cells (they surround the cell that contains Cell Phones).

  3. Give the cells with the | characters a width of 1%, and center the | characters within the cells.

  4. Use the .navbar class to color the | characters white.

  5. Enclose the words Cell Phones and PDAs in <a> tags that link to phones.html and pdas.html, respectively.

  6. Use the navbar class to format the links.

  7. Change the in-page style so the smalltext class specifies 9pt, italic text.

  8. Save the page and view it in the browser.

    It should look like the one at:

    http://www.visibooks.com/books/html/advlayout

    Click To expand


Layout Coding Chart

Task

Tag

Example

Set up a Web page

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

<html>
<head>
Meta tags, JavaScript, style sheets go
here
<title>
The page's title goes
here </title>
</head>

<body>
Whatever you want to appear on the
screen goes here
</body>

</html>

Format text

Create a paragraph

<p>

<p>This is a paragraph.</p>

Align paragraph right; center paragraph

<p
align="right"></p>

<p
align="center"></p>

<p align="center>This paragraph is
    centered
in this cell by using the
align attribute.</p>

Make text bold

<b></b>

<b>This text is bold.</b>

Indent text

<ul></ul>

<ul>
This text is indented.
</ul>

Create bulleted list

<ul>
<li>
</ul>

  • List item

  • List item

Create numbered list

<ol>
<li>
</ol>

  1. Item #1

  2. Item #2

Create a link

Link to a page within site

<a
href="x.html"></a>

<a href="x.html">This sentence is
linked to a page about X topic.</a>

Create an e-mail link

<a
href="mailto:you@x.c
om"></a>

you@x.com

Link to an external page

<a
href=http://www.x.c
om
target="new"></a>

This sentence is linked to http://www.x.com.

Insert a graphic

Insert graphic

<img src="x.gif">

Align a graphic right or left

<img src="x.gif"
align="right">

<img src="x.gif"
align="left">

Text flows in to the side of the graphic when it's aligned right or left.

Add vertical, horizontal space around a graphic

<img src="x.gif"
vspace="x">

<img src="x.gif"
hspace="x">

Creates vertical and horizontal space around graphic that nothing can occupy.

Remove/Add border

<img src="x.gif"
border="0">

<img src="x.gif"
border="1">

Create a table

Insert table

  <table>
  <tr>
  <td></td>
  <td></td>
  </tr>
  </table>

Specify widths

  <table
  width="100%">
  <tr>
  <td width="20%">
  <td width="80%">
  </tr>
  </table>

Specify border

  <table border="0">

Pad cells

<table
cellpadding="16">

Space cells

<table
cellspacing="24">

Change cell background color

<td bgcolor="#000000>

Insert background image in cell

<td background="x.gif">

Include forms

Establish form

<form>

Insert textbox

<form>
<input type="text">

Specify size

<input type="text"
 size="20">

Specify name

<input type="text"
size="20" name="x">

Insert checkbox

<input type="checkbox">

Insert radio buttons

<input type="radio">

Insert drop-down list

<select name="x">
<option></option>
<option></option>
</select>

<select name="x">
<option> First Choice</option>
<option> Second Choice</option>
</select>

Insert comment field

<textarea name="x"
cols="22"
rows="8"></textarea>

Insert submit button

<input type="submit">

Change text on button

<input type="submit"
value="your text here">

Employ style sheets

Create style sheet

Save file with .css extension.

stylesheetname.css

Create style

.stylename { }

Specify font family

{font-family:font name, font name}

{font-family:arial,sans-serif}

Specify font size

{font-size:0pt}

Specify font weight

{font-weight:bold}

Specify color

{color:000000}

Link to a style sheet

<link rel="stylesheet"
href="stylesheetname.css">

Create link rollover effects

a:hover { }

a:hover {color:ff0000; font-weight:bold}


List of Sidebars

HTML Basics

Home page file names
File names for the Web
Providing navigation clues with text size
Alt text
Showing "you are here"
Hexadecimal colors
Consistent link colors

Layout & Navigation

Consistent page layout

Interactivity

META tags
Making a form work
WS_FTP

Advanced Layout

Why use spacer GIFs?

Team LiB
Previous Section